<template>
  <el-select @change="(e) => changeValue(e)" v-bind="$attrs" v-model="opvalue">
    <el-option
      :key="item[props.value]"
      :label="item[props.label]"
      :value="item[props.value]"
      v-for="item in options"
    >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    name: 'SelectDic',
    model: {
      prop: 'msg',
      event: 'parent-event'
    },
    props: {
      dicUrl: {
        type: String,
        default: '',
      },
      dicArray: {
        type: Array,
        default: function () {
          return []
        }
      },
      props: {
        type: Object,
        default: function () {
          return {
            value: 'value',
            label: 'label'
          }
        }
      },
      msg: {
        type: [String, Number],
        default: ''
      },
      change: {
        type: Function
      }
    },
    watch: {
      msg: function (val) {
        console.log(val,'model')
        this.opvalue = val+''
      },
      dicArray: function (val) {
        console.log(val,'dicArray')
        this.options = val
      }
    },
    data () {
      return {
        options: [],
        opvalue: ''
      }
    },
    methods: {
      changeValue (e) {
        this.$emit('parent-event', e)
        this.$emit('change',e)
      }
    },
    mounted: function () {
      if (this.dicArray && this.dicArray.length > 0) {
        this.options = this.dicArray
      } else if(this.dicUrl) {
        this.$http.get(this.dicUrl).then(res => {
          console.log("res",res)
          this.options = res.data

        })
      }
    }
  }
</script>

<style scoped>

</style>
